import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
import { Badge } from './ui/badge';
import { TrendingUp, Tag } from 'lucide-react';
import Link from 'next/link';
import { toast } from 'sonner';

interface SidebarProps {
  popularPosts: Array<{ id: number; title: string; viewCount: number }>;
  tags: any;
  onBack: () => void;
  onPostClick?: (postId: number) => void;
}

export default function Sidebar({ popularPosts, tags, onBack, onPostClick }: SidebarProps) {
  return (
    <aside className="space-y-6 lg:sticky lg:top-20 self-start">
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <TrendingUp className="w-5 h-5" />
            热门文章
          </CardTitle>
        </CardHeader>
        <CardContent>
          <ul className="space-y-4">
            {popularPosts.map((post, index) => (
              <li key={post.id} className="flex gap-3">
                <span className="flex-shrink-0 w-6 h-6 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center text-sm">
                  {index + 1}
                </span>
                <div className="flex-1 min-w-0">
                  <Link 
                    href={`/article/${post.id}`} 
                    onClick={(e) => {
                      if (onPostClick) {
                        e.preventDefault();
                        onPostClick(post.id);
                      }
                    }}
                  >
                    <p className="text-sm text-gray-900 line-clamp-2 hover:text-blue-600 cursor-pointer transition-colors">
                      {post.title}
                    </p>
                  </Link>
                  <p className="text-xs text-gray-500 mt-1">{post.viewCount} 浏览</p>
                </div>
              </li>
            ))}
          </ul>
        </CardContent>
      </Card>

      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Tag className="w-5 h-5" />
            热门标签
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex flex-wrap gap-2">
            {tags.map((tag: any) => (
              <Badge 
                key={tag.name} 
                variant="outline"
                className="cursor-pointer hover:bg-blue-50 hover:text-blue-600 hover:border-blue-600"
              >
                {tag.name} ({tag.usageCount})
              </Badge>
            ))}
          </div>
        </CardContent>
      </Card>

      <Card className="bg-gradient-to-br from-blue-400 to-indigo-500 text-white">
        <CardContent className="p-6">
          <h3 className="mb-2">订阅我们的博客</h3>
          <p className="text-sm text-blue-50 mb-4">
            获取最新的文章和更新
          </p>
          <input
            type="email"
            placeholder="输入您的邮箱"
            className="w-full px-4 py-2 rounded-lg text-gray-900 text-sm mb-3"
          /> 
          <button onClick={() => toast.success('成功!')} className="w-full bg-white text-blue-500 px-4 py-2 rounded-lg hover:bg-blue-50 transition-colors">
            订阅
          </button>
        </CardContent>
      </Card>
    </aside>
  );
} 